<template>
  <div class="container">
    <div class="TeachingTop">
      <!-- 上半部分内容 -->
      <TeachingTop />
    </div>
    <dv-border-box-12 :color="['#50649a', '#50649b']">
      <div class="TeachingBottom">
        <!-- 下半部分内容 -->
        <TeachingBottom />
      </div>
    </dv-border-box-12>
  </div>
</template>
  
  <script>
import TeachingTop from "./TeachingTop.vue";
import TeachingBottom from "./bottom/TeachingBottom.vue";

export default {
  name: "TeachingStaff",
  // 在父组件中可以像使用普通元素一样使用这个组件，并在上下半部分插入内容
  components: {
    TeachingTop,
    TeachingBottom,
  },
};
</script>
  
  <style scoped>
.container {
  display: flex;
  flex-direction: column;
  height: 100%; /* 设置容器高度 */
  width: 100%; /* 设置容器高度 */

  /* border-radius: 10px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(25px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-bottom: 1px solid rgba(255, 255, 255, 0.35);
    border-left: 1px solid rgba(255, 255, 255, 0.35); */
}
/* 滚动效果 */
/* .TeachingTop,
  .TeachingBottom {
    overflow: auto; 
  } */

.TeachingTop {
  flex: 1; /* 上下均分 */
  margin-bottom: 5px;
  /* background-color: rgb(198, 247, 247); */
}
.TeachingBottom {
  flex: 2; /* 上下均分 */
  padding: 10px;
  color: #fff;
  /* background-color: rgb(224, 250, 232); */
  /* backdrop-filter: blur(25px); */
  /* background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  border: 1px solid rgba(147, 235, 248, 0.6);
  border-bottom: 1px solid rgba(147, 235, 248, 0.35);
  border-left: 1px solid rgba(147, 235, 248, 0.35); */
  /* 盒子的内阴影 */
  /* box-shadow: 0px 0px 10px rgba(128, 217, 248, 9) inset; */
}
</style>
  